@charset "utf-8";
@import "variable";
// 网页选中变色
.select {
  background: @themeR;
  color: rgba(255, 255, 255, 0.8);
}

::selection {
  .select
}

::-moz-selection {
  .select
}

::-webkit-selection {
  .select
}
html{height: 100%;}
body {
  background-color: #f3f4f5;
  background-image: url('../../image/bsbg.png');
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  >main{
    flex: 1;
  }
}

// 链接控制
a,
a:visited,
a:hover,
a:focus {
  text-decoration: none !important;
}

.btn {
  cursor: pointer;
  &:focus {
    box-shadow: 0 0 0 3px rgba(255, 140, 49, 0.5);
  }
}

.btn-danger{
  background: linear-gradient(to right, fade(@themeR, 70), @themeR);  
  background-color: white;
  border: 0;
}
.btn-primary{
  background: linear-gradient(to right, fade(@themeG, 70), @themeG);  
  background-color: white;
  border: 0;
}

// navBar
.hiddenNav {
  background-color: @themeR;
  padding: 0 1rem;
  background-clip: content-box;
  >nav {
    display: flex;
    justify-content: space-between;
  }
}

body {
  // 聊天框
  >nav {
    background: white;
    margin-bottom: 15px;
    .navbar-brand {
      display: block;
      height: @navBarBrandSize;
      width: @navBarBrandSize;
      background-image: url("./../../image/bsLogo.png");
      background-position: 50%;
      background-size: 80%;
      background-repeat: no-repeat;
    }
    div ul li {
      position: relative;
      margin-left: 0.5rem;
      &.active {
        a {
          color: @themeR  !important;
          &:after {
            content: '';
            width: 100%;
            height: 4px;
            background-color: @themeR;
            position: absolute;
            top: 100%;
            left: 0;
          }
        }
      }
      a {
        font-weight: 600;
        // letter-spacing: 0.25rem;
        text-align: right;
        &:hover {
          color: @themeR  !important;
          &:after {
            content: '';
            width: 100%;
            height: 4px;
            background-color: @themeR;
            position: absolute;
            top: 100%;
            left: 0;
          }
        }
      }
    }
    .searchInput{
      position: absolute;
      background-color: white;
      display: flex;
      justify-content: space-between;
      z-index: 9999;
      right: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  padding: 1rem;
    }
  }
}

.cardShad{
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
    &:hover {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

main > .card{
  margin: 1rem 0;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  &.cardShadow {
    .cardShad;
  }
}


.footerLinksSocial(@roundBackColor) {
  background-color: @roundBackColor;
  &:hover {
    background-color: fade(@roundBackColor, 40%);
  }
  a:hover {
    color: white !important
  }
}

footer {
  padding: 1rem;
  .links {
    width: 100%;
    ul {
      margin: 1rem 0;
      padding-left: 0;
      display: flex;
      justify-content: center;
      li {
        width: 50px;
        height: 50px;
        font-size: 24px;
        padding: 0;
        border-radius: 50%;
        margin: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        &:nth-child(1) {
          .footerLinksSocial(#42bd41);
        }
        &:nth-child(2) {
          .footerLinksSocial(#e25550);
        }
        &:nth-child(3) {
          .footerLinksSocial(#24292e);
        }
        &:nth-child(4) {
          .footerLinksSocial(#2ba3ef);
        }
      }
    }
  }
  li {
    display: inline-block;
    padding: 0 3rem;
    a {
      color: white;
      text-decoration: none;
      &:hover {
        color: @themeR;
        text-decoration: none;
      }
    }
  }
  .info-list {
    width: 100%;
    justify-content: center;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    list-style: none;
    padding: 1rem;
    li {
      &:not(:last-child) {
        border-right: 1px solid gray;
      }
    }
  }
  p {
    color: white;
    margin: 0 auto;
    padding: 1rem;
  }
}

@media (max-width: 62em) {
  footer {
    .info-list {
      flex-direction: column;
      li {
        width: 80%;
        margin: 0 auto;
        padding: 1.5rem 0;
        &:not(:last-child) {
          border-right: none;
          border-bottom: 1px solid gray;
        }
      }
    }
  }
}

@media (max-width: 992px) {
  html {
    font-size: 14px;
  }
  .searchInput{
    left: 0!important;
  }
}



.bookCard {
  border-radius: 5px;
  padding: 0 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  .bookRow {
    display: flex;
    >.card-img-top {
      position: relative;
      flex: 0;
      >.bookImg {
        position: relative;
        top: -2rem;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        transition: all 0.3s;
      }
    }
    .card-body {
      padding: 1.5rem 0 1.5rem 1.5rem;
      position: relative;
      >p {
        margin-bottom: 0;
        line-height: 2rem;
        letter-spacing: 2px;
        &.title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        &.subtitle {
          color: #858585;
        }
        &.discribe {
          margin-top: 0.5rem;
          position: relative;
          height: 9.5em;
          overflow: hidden;
          font-size: 0.8rem;
          text-indent: 2em;
          &:after {
            content: "...";
            font-weight: bold;
            position: absolute;
            bottom: 0;
            right: -4px;
            padding: 0 1rem 1px 45px;
            background: url('./../../image/ellipsis_bg.png') repeat-y;
            line-height: 1.5rem;
          }
        }
      }
    }
    .card-footer {
      border: 0;
      border-top: 1px solid #f2f2f2 !important;
    }
  }
  &:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    .bookRow .bookImg {
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
      top: -2.1rem;
    }
  }
}

@media (max-width: 991px) {
  .bookCard {
    padding: 0.25rem;
    .bookRow {
      justify-content: center;
      flex-direction: column;
      >.card-img-top {
        position: relative;
        flex: 0;
        padding: 0.25rem;
        >.bookImg {
          position: relative;
          max-width: 98%;
          height: auto;
          top: 0.5rem;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
          transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
        }
      }
      .card-body {
        padding: 1.5rem;
        >p {
          &.discribe {
            height: 4.1em;
          }
        }
      }
    }
  }
}

@media (max-width: 1000px) {
  html {
    font-size: 14px;
  }
}
@media (max-width: 512px) {
  html {
    font-size: 12px;
  }
}

ul.pagination{
  .active{
  .page-link{
    background-color: @themeR;
    border-color: @themeR;
    color: white!important;
  }
}
}